﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>后台管理</title>
    <link href="~/lib/layui/css/layui.css" rel="stylesheet" />
    <script src="~/lib/layui/layui.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
    <div class="demoTable">
        <form class="layui-form" onsubmit="return false;">
            姓名：
            <div class="layui-inline">
                <input class="layui-input" name="CustomerName" id="CustomerName" autocomplete="off">
            </div>
            手机号：
            <div class="layui-inline">
                <input class="layui-input" name="CustomerPhone" id="CustomerPhone" autocomplete="off">
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>

        </form>
    </div>
    <button type="button" class="layui-btn" id="TJ">
        <i class="layui-icon">&#xe608;</i> 添加
    </button>
    <table class="layui-hide" id="test" lay-filter="test"></table>
    <script id="barDemo" type="text/html">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="batchDel" id="DelAll">批量删除</button>
        </div>
    </script>

    <script>
        layui.use(['table', 'layer', 'form'], function () {
            $ = layui.jquery;
            var layer = layui.layer, table = layui.table, form = layui.form;
            table.render({
                elem: '#test'
                , url: '/Customer/Search'
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , cols: [[
                    { type: 'checkbox', fixed: 'left' }
                    , { field: 'Id',hide:true ,width: 100, title: 'Id', align: "center" }
                    , { field: 'CustomerName', width: 100, title: '真实姓名', align: "center" }
                    , { field: 'CustomerNiCheng', width: 80, title: '昵称', align: "center" }
                    , { field: 'CustomerSex', width: 80, title: '性别', align: "center" }
                    , { field: 'CustomerPhone', width: 160, title: '手机号码', align: "center" }
                    , { field: 'CustomerEmail', width: 160, title: '邮箱', align: "center" }
                    , { field: 'CustomerLoginTime', width: 160, title: '登录时间', align: "center" }
                    , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
                ]]
                , page: true
                , id: 'testReload'
            });       
       

        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if (layEvent === 'detail') { //查看
                //do somehing
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url: '/Customer/Del',
                        type: 'post',
                        data: { id: data.Id },
                        success: function (res) {
                            if (res.success) {
                                layer.msg(res.msg);
                            }
                        }
                    });
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                });
            }
         ///编辑
                 else if (obj.event === 'edit') {
                    var Id = data['Id'];
                    layer.open({
                        type: 2,
                        title: "编辑信息",
                        area: ["380px", "500px"],
                        content: '/Customer/Edit?Id=' + Id,
                       
                        
                    });
                }
                return false;
           
        });


        $("#DelAll").on('click', function () {
            //获取选中状态
            var checkStatus = table.checkStatus('testReload');
            console.log(checkStatus);
            //获取选中数量
            var selectCount = checkStatus.data;
            if (selectCount == 0) {
                layer.msg('批量删除至少选中一项数据');
                return ;
            }
            layer.confirm('真的要删除选中的项吗？', function (index) {
                layer.close(index);
                var idss = [];
                for (var i = 0; i < selectCount.length; i++) {
                    let obj = checkStatus.data[i].Id;
                    idss.push(obj);
                }
                var idsx = idss.join(',');
                $.ajax({
                    type: 'post',
                    data: { "ids": idsx },
                    url: '/Customer/Pubdel',
                    success: function (res) {
                        if (res.code == 0) {
                            active["reload"].call(null);
                            layer.msg("成功删除");

                        }
                    }, error: function (code) {                     
                        layer.msg('操作失败!', { icon: 5, time: 1000 });
                    }

                });
            })
        });
            
            $('#TJ').on('click', function () {
                layer.open({
                    type: 2,
                    title: "查看信息",
                    area: ["380px", "500px"],
                    content: '/Customer/Add',
                });
            });

            active = {
                reload: function () {

                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            CustomerName : $('#CustomerName').val(),
                            CustomerPhone: $('#CustomerPhone').val()
                        }
                    }, 'data');
                }
            };
            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });      
    </script>
</body >
</html >
